<template>
  <view class="share-page">
    <view class="share-content" :style="{ backgroundImage: `url(${backgroundImage})`, 
      backgroundSize: '145%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }">
      <view class="share-header">
        <text class="share-title">我的MBTI人格类型</text>
        <view class="mbti-type-container">
          <text class="mbti-type">{{ mbtiType }}</text>
          <text class="mbti-name">{{ getMBTITypeName(mbtiType) }}</text>
        </view>
      </view>
      
      <view class="share-body">
        <view class="compatibility">
          <text class="compatibility-title">最佳匹配:</text>
          <text class="compatibility-content">{{ getCompatibleTypes(mbtiType) }}</text>
        </view>
        
        <view class="personality-traits">
          <text class="traits-title">基础画像</text>
          <text class="traits-content">{{ personalityTraits }}</text>
        </view>
        
        <view class="jung-functions">
          <text class="jung-title">荣格八格</text>
          <text class="jung-content">{{ jungFunctions }}</text>
        </view>
        
        <view class="career-summary">
          <text class="career-title">职场小结</text>
          <text class="career-content">{{ careerSummary }}</text>
        </view>
        
        <view class="love-tips">
          <text class="love-title">恋爱锦囊</text>
          <text class="love-content">{{ loveTips }}</text>
        </view>
      </view>
      
      <view class="share-footer">
        <!-- <text class="app-name">心情港湾</text>
        <text class="scan-text">长按识别小程序码，立即测试</text> -->
        <text class="scan-text">点击小程序码，立即测试</text> 
        <image class="qr-code" @longpress="handleNativeLongPress" @click="goToMbitIndex" src="https://hongcat-beta.oss-cn-chengdu.aliyuncs.com/share_imgs/qrcode.png" mode="aspectFit"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mbtiType: 'INTJ', // 默认值
      personalityData: {
        'INTJ': {
          personalityTraits: "独立思考的战略家，富有想象力且果断",
          jungFunctions: "内倾直觉主导，外倾思维辅助",
          careerSummary: "适合科研、工程、战略规划等需要深度思考的岗位",
          loveTips: "重视思想深度的连接，需要理解其独立空间的伴侣"
        },
        'INTP': {
          personalityTraits: "创新型的思想家，喜欢分析和探索概念",
          jungFunctions: "内倾思维主导，外倾直觉辅助",
          careerSummary: "适合科学研究、软件开发、学术研究等岗位",
          loveTips: "需要智力层面的共鸣，欣赏独立自主的伴侣"
        },
        'ENTJ': {
          personalityTraits: "天生的领导者，充满自信且有远见",
          jungFunctions: "外倾思维主导，内倾直觉辅助",
          careerSummary: "适合企业高管、创业者、项目经理等领导岗位",
          loveTips: "寻找能跟上其节奏的伴侣，欣赏有主见的人"
        },
        'ENTP': {
          personalityTraits: "充满好奇心的创新者，聪明且善于辩论",
          jungFunctions: "外倾直觉主导，内倾思维辅助",
          careerSummary: "适合市场营销、咨询、创业等领域",
          loveTips: "享受智力激荡的关系，需要不断有新鲜感的伴侣"
        },
        'INFJ': {
          personalityTraits: "神秘而富有洞察力的理想主义者",
          jungFunctions: "内倾直觉主导，外倾情感辅助",
          careerSummary: "适合心理咨询、教育、艺术创作等有意义的工作",
          loveTips: "寻求灵魂伴侣，重视深层次的情感连接"
        },
        'INFP': {
          personalityTraits: "诗意且善良的利他主义者，价值观驱动",
          jungFunctions: "内倾情感主导，外倾直觉辅助",
          careerSummary: "适合写作、艺术、心理咨询、社会工作等岗位",
          loveTips: "需要真正理解和接纳其内心世界的伴侣"
        },
        'ENFJ': {
          personalityTraits: "热情共情的领导者，热爱联结与激励他人",
          jungFunctions: "外倾情感主导，内倾直觉辅助",
          careerSummary: "擅长团队协作，适合管理与咨询岗位",
          loveTips: "需要伴侣呼应其情感付出，共同成长"
        },
        'ENFP': {
          personalityTraits: "热情洋溢的激励者，创意十足且多才多艺",
          jungFunctions: "外倾直觉主导，内倾情感辅助",
          careerSummary: "适合创意产业、公关、培训、艺术等领域",
          loveTips: "需要自由开放的关系，欣赏有趣且支持其梦想的伴侣"
        },
        'ISTJ': {
          personalityTraits: "负责任的检查者，严肃、安静且自律",
          jungFunctions: "内倾感觉主导，外倾思维辅助",
          careerSummary: "适合会计、法律、医疗、工程管理等需要精确性的岗位",
          loveTips: "重视稳定可靠的关系，需要尊重其原则的伴侣"
        },
        'ISFJ': {
          personalityTraits: "贴心的守护者，温暖、负责且忠诚",
          jungFunctions: "内倾感觉主导，外倾情感辅助",
          careerSummary: "适合医护、社工、教育、行政等服务性岗位",
          loveTips: "用行动表达爱意，需要懂得珍惜其付出的伴侣"
        },
        'ESTJ': {
          personalityTraits: "务实的管理者，果断、现实且自然",
          jungFunctions: "外倾思维主导，内倾感觉辅助",
          careerSummary: "适合管理、销售、警察、军事等需要执行力的岗位",
          loveTips: "偏爱直接坦诚的关系，欣赏有能力且可靠的伴侣"
        },
        'ESFJ': {
          personalityTraits: "热心助人的协调者，社交活跃且关心他人",
          jungFunctions: "外倾情感主导，内倾感觉辅助",
          careerSummary: "适合客户服务、教育、护理、活动策划等岗位",
          loveTips: "重视和谐温馨的关系，需要回应其关爱的伴侣"
        },
        'ISTP': {
          personalityTraits: "灵活的工匠，冷静、实用且动手能力强",
          jungFunctions: "内倾思维主导，外倾感觉辅助",
          careerSummary: "适合技术维修、工程、运动、急救等需要技能的岗位",
          loveTips: "偏爱轻松随性的关系，需要给其空间的伴侣"
        },
        'ISFP': {
          personalityTraits: "温和的艺术家，敏感、友善且适应性强",
          jungFunctions: "内倾情感主导，外倾感觉辅助",
          careerSummary: "适合艺术设计、音乐、护理、手工艺等岗位",
          loveTips: "需要温柔细腻的理解，欣赏真实自然的伴侣"
        },
        'ESTP': {
          personalityTraits: "活力四射的挑战者，灵活、现实且讲求实效",
          jungFunctions: "外倾感觉主导，内倾思维辅助",
          careerSummary: "适合销售、营销、体育、急救等快节奏岗位",
          loveTips: "偏爱刺激有趣的关系，需要能跟上其节奏的伴侣"
        },
        'ESFP': {
          personalityTraits: "热情奔放的表演者，自发、精力充沛且善于交际",
          jungFunctions: "外倾感觉主导，内倾情感辅助",
          careerSummary: "适合演艺、旅游、餐饮、活动主持等服务性岗位",
          loveTips: "享受当下的快乐关系，需要同样乐观开朗的伴侣"
        }
      }
    };
  },
  
  computed: {
    backgroundImage() {
      // 动态生成背景图片URL
      return `https://hongcat-beta.oss-cn-chengdu.aliyuncs.com/share_imgs/bg/share_${this.mbtiType}.png`;
    },
    personalityTraits() {
      return this.personalityData[this.mbtiType]?.personalityTraits || "独立思考的战略家，富有想象力且果断";
    },
    jungFunctions() {
      return this.personalityData[this.mbtiType]?.jungFunctions || "内倾直觉主导，外倾思维辅助";
    },
    careerSummary() {
      return this.personalityData[this.mbtiType]?.careerSummary || "适合科研、工程、战略规划等需要深度思考的岗位";
    },
    loveTips() {
      return this.personalityData[this.mbtiType]?.loveTips || "重视思想深度的连接，需要理解其独立空间的伴侣";
    }
  },
  
  onLoad(options) {
    // 接收传递的mbtitype参数
    if (options && options.mbtitype) {
      console.log('mbtitype', options.mbtitype);
      this.mbtiType = options.mbtitype.toUpperCase();
    }
    
    // 可以在这里调用接口获取更详细的人格特点数据
    // this.fetchPersonalityData();
  },
  
  methods: {
    getMBTITypeName(type) {
      const typeNames = {
        'INTJ': '建筑师',
        'INTP': '逻辑学家',
        'ENTJ': '指挥官',
        'ENTP': '辩论家',
        'INFJ': '提倡者',
        'INFP': '调停者',
        'ENFJ': '主人公',
        'ENFP': '竞选者',
        'ISTJ': '物流师',
        'ISFJ': '守护者',
        'ESTJ': '总经理',
        'ESFJ': '执政官',
        'ISTP': '鉴赏家',
        'ISFP': '冒险家',
        'ESTP': '企业家',
        'ESFP': '表演者'
      };
      return typeNames[type] || '未知类型';
    },
    
    getCompatibleTypes(type) {
      const compatibility = {
        'INTJ': 'ENFP, ENTP',
        'INTP': 'ENTJ, ENFJ',
        'ENTJ': 'INTP, INFP',
        'ENTP': 'INTJ, INFJ',
        'INFJ': 'ENFP, ENTJ',
        'INFP': 'ENFJ, ENTJ',
        'ENFJ': 'INFP, ISFP',
        'ENFP': 'INFJ, INTJ',
        'ISTJ': 'ESFP, ESTP',
        'ISFJ': 'ESFP, ESTP',
        'ESTJ': 'ISFP, ISTP',
        'ESFJ': 'ISFP, ISTP',
        'ISTP': 'ESFJ, ESTJ',
        'ISFP': 'ESFJ, ESTJ',
        'ESTP': 'ISFJ, ISTJ',
        'ESFP': 'ISFJ, ISTJ'
      };
      return compatibility[type] || '待探索';
    },
    goToMbitIndex() {
      uni.navigateTo({
        url: '/pages/mbit/index'
      });
    }
  }
};
</script>

<style scoped>
.share-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.share-content {
  width: 95vw;
  height: 84vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  box-sizing: border-box;
  position: relative;
}

.share-header {
  text-align: left;
  color: #333;
  margin-bottom: 40rpx;
}

.share-title {
  font-size: 36rpx;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.mbti-type-container {
  margin-bottom: 20rpx;
}

.mbti-type {
  font-size: 80rpx;
  font-weight: bold;
  display: block;
  letter-spacing: 4rpx;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.mbti-name {
  font-size: 36rpx;
  display: block;
  margin-top: 10rpx;
  opacity: 0.9;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.share-body {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  text-align: left;
  padding-left: 5px;
  width: 105%;
}

.traits-title, .compatibility-title, .jung-title, .career-title, .love-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
  text-align: left;
}

.traits-content, .compatibility-content, .jung-content, .career-content, .love-content {
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
  line-height: 1.6;
  display: block;
  margin-bottom: 30rpx;
  text-align: left;
}

.share-footer {
  /* text-align: center; */
}

.app-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.scan-text {
  font-size: 28rpx;
  color: #ff6b6b;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-bottom: 20rpx;
}

.qr-code {
    display: inline-grid;
}
</style>